<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>海底捞外送</title>
    <link rel="stylesheet" href="../css/u-reset.min.css">
    <link rel="stylesheet" href="../css/send.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <link rel="stylesheet" href="../font/iconfont.css">
    <script src="../js/swiper-bundle.min.js"></script>
    <script src="../js/send.js"></script>
</head>
<body>
    <div class="header ">
        <div class="header-left"><a href="./help.html"><img src="../image-cl/order2.png" alt=""></a></div>
        <div class="header-center"><img src="../image-cl/logo1.png" alt=""></div>
        <div class="header-right">
            <i class="iconfont icon-icon-user"></i>
            <a href="#">登录</a>
            <span>|</span>
            <a href="#">注册</a>
        </div>
    </div>
    <!-- 轮播图部分 -->
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="../image-cl/Banner-01.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../image-cl/Banner-03.jpg" alt=""></div>
            <div class="swiper-slide"><img src="../image-cl/Banner02.jpg" alt=""></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
        <!-- Add Arrows -->
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
    </div>
    <!-- 立即加入 -->
    <div class="section w">
        <div class="logo1">
            <img src="../image-cl/logo-c.png" alt="">
        </div>
        <div class="title">立即加入</div>
        <p>升级体验、还乐无忧</p>
    </div>
    <!-- 立即加入结束 -->
    <!-- 菜品开始 -->
    <div class="food w">
        <ul>
            <li><img src="../image-cl/food01.jpg" alt=""></li>
            <li><img src="../image-cl/food03.jpg" alt=""></li>
            <li><img src="../image-cl/food04.jpg" alt=""></li>
            <li><img src="../image-cl/food05.jpg" alt=""></li>
            <li><img src="../image-cl/food06.jpg" alt=""></li>
        </ul>
    </div>
    <!-- 菜品结束 -->
    <!-- 菜单开始 -->

    <div class="foodlist w">
        <ul class="foodlist-ul w">
            <li>
                <div class="foodimgdiv">
                    <img class='foodimg' src="../image-cl/time_1.jpg" alt="">
                    <img class="foodimg2" src="../image-cl/1.gif" alt="">
                </div>
            </li>
            <li>
                <img class='foodimg' src="../image-cl/time_2.jpg" alt="">
                <img class="foodimg2" src="../image-cl/2.gif" alt="">
            </li>
            <li>
                <div class="foodimgdiv">
                    <img class='foodimg' src="../image-cl/time_3.jpg" alt="">
                    <img class="foodimg2" src="../image-cl/3.gif" alt="">
                </div>
            </li>
            <li>
                <img src="../image-cl/time_4.jpg" alt="">
            </li>
            <li>
                <img src="../image-cl/time_5.jpg" alt="">
            </li>
            <li>
                <img src="../image-cl/time_6.jpg" alt="">
            </li>
            <li>
                <div class="foodimgdiv">
                    <img class='foodimg' src="../image-cl/time_7.jpg" alt="">
                    <img class="foodimg2" src="../image-cl/4.gif" alt="">
                </div>
            </li>
            <li>
                <div class="foodimgdiv">
                    <img class='foodimg' src="../image-cl/time_8.jpg" alt="">
                    <img class="foodimg2" src="../image-cl/5.gif" alt="">
                </div>
            </li>
            <li>
                <div class="foodimgdiv">
                    <img class='foodimg' src="../image-cl/time_9.jpg" alt="">
                    <img class="foodimg2" src="../image-cl/6.gif" alt="">

                </div>
            </li>
        </ul>
    </div>
    <!-- 菜单结束 -->
    <!-- 海底捞外送开始 -->
    <div class="section2 w">
        <div class="send-1">
            <img src="../image-cl/web_wenzi.png" alt=""> 随时随地&nbsp;享尽完美主义
        </div>
        <div class="send-2">
            <img src="../image-cl/weixin.jpg" alt=""> 海底捞外送二维码
        </div>
        <div class="send-3">
            <img src="../image-cl/web_pic.png" alt="">
        </div>
        <div class="send-4">
            <img src="../image-cl/web_wenzi3.png" alt="">
        </div>
    </div>
    <!-- 海底捞外送结束 -->
    <!-- 提供服务开始 -->
    <div class="service w">
        <h2 class="ser-title">我们可以提供那些服务</h2>
        <p class="ser-content">团聚，专属，家庭，户外</p>
    </div>
    <!-- 提供服务结束 -->
    <!--团家欢聚开始  -->
    <div class="unite w">
        <div class="unite-img">
            <img src="../image-cl/tuan.jpg" alt="">
            <div class="image-lable">团餐</div>
        </div>
        <div class="unite-img">
            <img src="../image-cl/jia.jpg" alt="">
            <div class="image-lable">专属</div>
        </div>
        <div class="unite-img">
            <img src="../image-cl/huwai.jpg" alt="">
            <div class="image-lable">家庭</div>
        </div>
        <div class="unite-img">
            <img src="../image-cl/zhuanshu.jpg" alt="">
            <div class="image-lable">户外</div>
        </div>
    </div>
    <!--团家欢聚结束  -->
    <!-- 开饭了开始 -->
    <div class="starteat w ">
        <div class="start-hi ">
            <img src="../image-cl/web_gif.gif " alt=" ">
        </div>
        <div class="start-food ">开饭了</div>
        <p>安心，匠心，缺一不可</p>
        <a href="# ">更多精彩视频</a>
    </div>
    <!-- 开饭了结束 -->
    <!-- 视屏开始 -->
    <div class="vadio w ">
        <img src="../image-cl/media2.jpg " alt=" " class="img1 ">
        <img src="../image-cl/media1.jpg " alt=" " class="img2 ">
    </div>
    <div class="gif w ">
        <img src="../image-cl/web_gif1.gif " alt=" ">
    </div>
    <!-- 视屏结束 -->
    <!--  海底捞外送产品开始-->
    <div class="product-send w ">
        <div class="pro-left ">
            <img src="../image-cl/pot.jpg " alt=" ">
        </div>
        <div class="pro-right ">
            <h2 class="ser-title ">海底捞外送</h2>
            <p class="ser-content ">海底捞外送产品，是海底捞通过精功夫制作出来的产品，为满足消费者的口味花了许多功夫在里面</p>
        </div>
    </div>
    <div class="gif w gif-hi ">
        <img src="../image-cl/gif.gif " alt=" ">
    </div>
    <!--  海底捞外送产品结束-->
    <!-- 扫码下载开始 -->
    <div class="scan-code w ">
        <div class="phone ">
            <img src="../image-cl/phone.png " alt=" ">
        </div>
        <div class="qrcode ">
            <img src="../image-cl/app.jpg " alt=" ">
            <i class="iconfont icon-pingguo " style="font-size: 24px;padding: 0 5px; "></i>
            <i class="iconfont icon-anzhuo " style="font-size: 24px;padding: 0 5px; "></i>
            <span style="font-size: 12px; color: #666; ">扫码下载APP</span>
        </div>
        <div class="scan-p ">
            <p class="ser-content ">下载全新海底捞官方APP，开启更便捷的就餐体验</p>
        </div>
    </div>
    <!-- 扫码下载结束 -->
    <!-- 合作公司开始 -->
    <div class="company w ">
        <div class="com-main ">
            <div class="com-logo ">
                <img src="../image-cl/order_w.png " alt=" ">
            </div>
            <div class="companies ">
                <ul>
                    <li>
                        <img src="../image-cl/yihailogo.png " alt=" " style="width: 200px; height: 96.5px; ">
                    </li>
                    <li>
                        <img src="../image-cl/haidilaologo.png " alt=" " style="width : 200px; height:60.5px; margin-top:20px ">
                    </li>
                    <li>
                        <img src="../image-cl/logo_shuhaigongyinglian.png " alt=" " style="width: 200px; height: 50px; margin-top:25px ">
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 合作公司结束 -->
    <!-- 我要点餐开始 -->
    <div class="my-order ">
        <div class="my-img1 ">
            <img src="../image-cl/order.png " alt=" ">
        </div>
        <div class="my-img2 ">
            <img src="../image-cl/corecode1.png " alt=" ">
        </div>
    </div>
    <!-- 我要点餐结束 -->



</body>


</html>